<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入echarts-->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px; height:600px; background:pink"></div>
<script>
            // js初始化echarts
            var main =  echarts.init(document.getElementById("main"))
            // 配置echarts var， 后面的都是复制过来的echarts配置 https://echarts.apache.org/examples/zh/editor.html?c=pie-custom
           var option = {
              backgroundColor: '#2c343c',
              title: {
                text: 'Customized Pie',
                left: 'center',
                top: 20,
                textStyle: {
                  color: '#ccc'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                  colorLightness: [0, 1]
                }
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '50%'],
                  data: [
                    { value: 335, name: 'Direct' },
                    { value: 310, name: 'Email' },
                    { value: 274, name: 'Union Ads' },
                    { value: 235, name: 'Video Ads' },
                    { value: 400, name: 'Search Engine' }
                  ].sort(function (a, b) {
                    return a.value - b.value;
                  }),
                  roseType: 'radius',
                  label: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  labelLine: {
                    lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                  },
                  itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                    return Math.random() * 200;
                  }
                }
              ]
            };

            // 用配置单配置echarts
            main.setOption(option)



</script>
</body>
</html>
<!--11-->